<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>新闻列表</title>
    <style>
        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* 表格行悬停效果 */
        table tbody tr {
            transition: background-color 0.3s ease;
        }

        table tbody tr:hover {
            background-color: #f3f4f6;
        }

        /* 按钮动画效果 */
        button {
            transition: background-color 0.3s ease;
        }

        /* 淡入动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        #newsTable {
            animation: fadeIn 0.8s ease;
        }
    </style>
    <!-- 引入 jQuery 库 -->
    <script src="js/jquery.min.js"></script>
</head>

<body class="bg-gray-100 font-sans">
    <h1 class="text-3xl font-bold text-center text-gray-800 py-8">新闻列表</h1>
    <div class="flex justify-between items-center px-4 py-4">
        <button type="button" id="batchDeleteButton" onclick="batchDelete()"
            class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">批量删除</button>
        <div class="flex space-x-4">
            <button type="button" id="addNewsButton" onclick="location.href='news_add.html'"
                class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">增加新闻</button>
            <button type="button" id="logoutButton" onclick="location.href='login.html'"
                class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">安全退出</button>
        </div>
    </div>
    <div class="px-4">
        <table id="newsTable" class="w-full bg-white shadow-md rounded-md overflow-hidden">
            <thead class="bg-gray-200">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">选择</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">作者</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">热度</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script>
        getNewsList();

        function getNewsList() {
            $.ajax({
                type: "get",
                url: "/news/getNewsList",
                success: function (result) {
                    var finalHtml = "";
                    for (var news of result) {
                        finalHtml += '<tr>';
                        finalHtml += '<td class="px-6 py-4"><input type="checkbox" name="selectNews" value="' + news.id + '" id="selectNews" class="news-select"></td>';
                        finalHtml += '<td class="px-6 py-4">' + news.title + '</td>';
                        finalHtml += '<td class="px-6 py-4">' + news.author + '</td>';
                        finalHtml += '<td class="px-6 py-4">' + news.newsDate + '</td>';
                        finalHtml += '<td class="px-6 py-4">' + news.heat + '</td>';
                        finalHtml += '<td class="px-6 py-4">';
                        finalHtml += '<a href="news_getNewsText.html?id=' + news.id + '" class="text-blue-500 hover:text-blue-600 mr-2">查询详情</a>';
                        finalHtml += '<a href="news_update.html?id=' + news.id + '" class="text-green-500 hover:text-green-600 mr-2">修改</a>';
                        finalHtml += '<a href="javascript:void(0)" onclick="deleteNews(' + news.id + ')" class="text-red-500 hover:text-red-600">删除</a>';
                        finalHtml += '</td></tr>';
                    }
                    $("tbody").html(finalHtml);
                },
                error: function (error) {
                    if (error.status == 401) {
                        alert("用户未登录, 请先登录");
                        location.href = "login.html";
                    }

                }
            });
        }

        function deleteNews(id) {
            if (confirm('确定要删除这条新闻吗？')) {
                $.ajax({
                    type: "post",
                    url: "/news/deleteNews?id=" + id,
                    success: function (result) {
                        if (result == "") {
                            alert('删除成功');
                            location.href = "/news.html"; // 重新加载新闻列表
                        } else {
                            alert('删除 failure');
                        }
                    },
                    error: function () {
                        alert('请求出错');
                    }
                });
            }
        }

        function batchDelete() {
            var isDelete = confirm("确认批量删除?");
            if (isDelete) {
                // 获取复选框的id
                var ids = [];
                $("input:checkbox[name='selectNews']:checked").each(function () {
                    ids.push($(this).val());
                });
                console.log(ids);
                $.ajax({
                    type: "post",
                    url: "/news/batchDelete?ids=" + ids,
                    success: function (result) {
                        if (result == "") {
                            location.href = "/news.html";
                        } else {
                            alert(result.errMsg)
                        }
                    }
                });
            }
        }
    </script>
</body>

</html>